import { Component, OnInit } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
import { User } from 'src/app/model/user';

@Component({
  selector: 'app-account',
  templateUrl: './account.component.html',
  styleUrls: ['./account.component.css']
})
export class AccountComponent implements OnInit {

  headers = new HttpHeaders({ 'Content-Type': 'application/json' });
  user: User;
  type: number = 2
  name: string
  email: string
  profile: string
  facilities: string
  numOfYears: number
  username: string
  password: string
  repassword: string
  captcha: string
  userStatus: string
  
  accountForm = new FormGroup({
    type: new FormControl('2'),
    name: new FormControl(''),
    email: new FormControl(''),
    profile: new FormControl(''),
    facilities: new FormControl(''),
    numOfYears: new FormControl(''),
    username: new FormControl(''),
    password: new FormControl(''),
    repassword: new FormControl(''),
    captcha: new FormControl('')
  });

  constructor(private http: HttpClient) {
  }


  ngOnInit(): void {
    console.log('AccountComponent.userinfo', localStorage.getItem('userinfo'))
    // debugger
    let id = JSON.parse(localStorage.getItem('userinfo'))['id']
    // let id = this.user.id
    this.http.get('/api/user/' + id)
      .subscribe(data => {
        console.log(data)
        this.user = new User()
        this.user.id = data['id']
        this.user.type = data['type']
        this.user.name = data['name']
        this.user.username = data['username']
        this.user.email = data['email']
        this.user.profile = data['profile']
        this.user.facilities = data['facilities']
        this.user.numOfYears = data['numOfYears']
        this.user.userStatus = data['userStatus']

        this.type = this.user.type
        this.name = this.user.name
        this.email = this.user.email
        this.profile = this.user.profile
        this.facilities = this.user.facilities
        this.numOfYears = this.user.numOfYears
        this.username = this.user.username
        this.password = this.user.password
        this.captcha = this.user.captcha
        this.userStatus = this.user.userStatus
      })

  }

  onSubmit(): void {
    this.user.type = this.type
    this.user.name = this.name
    this.user.username = this.username
    this.user.email = this.email
    this.user.profile = this.profile
    this.user.facilities = this.facilities
    this.user.numOfYears = this.numOfYears
    this.user.password = this.accountForm.value.password
    this.user.captcha = this.captcha
    this.user.userStatus = this.userStatus
    console.log('this.user', this.user)
    // debugger
    this.http.put<any>('/api/user/update',
      this.user,
      { headers: this.headers, reportProgress: true })
      .subscribe((data: any) => {
        console.log(data)
        if (data.status == 'success') {
          //update localstorage data
          localStorage.setItem('userinfo', JSON.stringify(data.data))
          alert('update successfully')
          setTimeout(() => {
            window.location.assign('/account')
          }, 1000);
        } else if (data.status == 'codefail') {
          alert('Captcha is wrong')
          this.refresh()
          this.captcha = ''
        } 
      });
  }

  refresh(): void {
    console.log('refresh')
    let captcha_img = <HTMLInputElement>document.getElementById('captcha_img')
    captcha_img.src = "/api/kaptcha?" + Math.random()
  }
}
